<template>
    <div>
        <div class="page-title">下达任务</div>
        <div class="page-content">
            <el-form label-width="120px" :model="formData" ref="formData" style="width:100%">
                <div>
                    <el-form-item label="下达日期">
                        <el-col :span="6">
                            <el-date-picker type="date" placeholder="选择日期" v-model="postData.startDate"
                                style="width: 100%; " value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptionsStart"></el-date-picker>
                        </el-col>
                        <el-col class="center_text" :span="0.5">-</el-col>
                        <el-col :span="6">
                            <el-date-picker placeholder="选择日期" v-model="postData.endDate" style="width: 100%;"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptionsEnd">
                            </el-date-picker>
                        </el-col>
                        <el-col></el-col>
                    </el-form-item>
                    <el-form-item label="下达人员">
                        <el-row>
                            <el-col :span="6">
                                <el-input v-model="formData.user"></el-input>
                            </el-col>
                            <el-col :span="0.5">
                                -
                            </el-col>
                            <el-col :span="6">
                                <el-input type="number" v-model="time" placeholder="请填写轮次 "></el-input>
                            </el-col>
                            <el-button type="primary" @click="addTimes();submit()">下达任务</el-button>
                            <el-button>取消</el-button>
                        </el-row>
                    </el-form-item>
                    <div class="cutting"></div>
                </div>
                <div>
                    <el-form-item label="检查组">
                        <el-select @change="getRoles()" v-model="formData.groupName" placeholder="请选择检查组">
                            <el-option v-for="item in formData.groups" :value="item.dictCode" :key="item.dictCode"
                                :label="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择检查组成员">
                        <el-checkbox-group @change="getTeam();getGroup();getLocation();getKey();getCheck();getData()"
                            v-model="submitData.staffName">
                            <el-checkbox v-for="item in formData.roles" :value="item.staffName"
                                :key="item.staffID" :label="item.staffName"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>


                    <el-tag type="success">任务队</el-tag>
                    <el-table height="350"
                        :data="postData.tableTeam.filter(data => !search ||data.staffName.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">
                       
                        <el-table-column label="地区" prop="areaName">
                        </el-table-column>
                        <el-table-column label=姓名 prop="staffName">
                        </el-table-column>
                        <el-table-column label=作业队 prop="taskItem">
                        </el-table-column>
                        <el-table-column label=监督次数>
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.plannedInspectionTimes"
                                    @change="handleChange(scope.$index, scope.row)" :min="0" :max="10" label="描述文字">
                                </el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column align="right">


                        </el-table-column>
                    </el-table>





                    <el-tag type="success">生产辅助班组</el-tag>
                    <el-table max-height="250" 
                        :data="postData.tableGroup.filter(data => !search ||data.staffName.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">
                       
                        <el-table-column label="地区" prop="areaName">
                        </el-table-column>
                        <el-table-column label=姓名 prop="staffName">
                        </el-table-column>
                        <el-table-column label=辅助班组 prop="taskItem">
                        </el-table-column>
                        <el-table-column label=监督次数>
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.plannedInspectionTimes"
                                    @change="handleChange(scope.$index, scope.row)" :min="0" :max="10" label="描述文字">
                                </el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column align="right">
                            <template slot="header">
                            </template>

                        </el-table-column>
                    </el-table>



                    <el-tag type="success">重点部位</el-tag>
                    <el-table  max-height="250"
                        :data="postData.tableLocation.filter(data => !search ||data.staffName.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">
                       
                        <el-table-column label="地区" prop="areaName">
                        </el-table-column>
                        <el-table-column label=姓名 prop="staffName">
                        </el-table-column>
                        <el-table-column label=重点部位 prop="taskItem">
                        </el-table-column>
                        <el-table-column label=监督次数>
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.plannedInspectionTimes"
                                    @change="handleChange(scope.$index, scope.row)" :min="0" :max="10" label="描述文字">
                                </el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column align="right">
                            <template slot="header">
                            </template>

                        </el-table-column>
                    </el-table>




                    <el-tag type="success">关键环节</el-tag>
                    <el-table max-height="250"
                        :data="postData.tableKey.filter(data => !search ||data.staffName.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">
                       
                        <el-table-column label="关键环节" prop="taskItem">
                        </el-table-column>
                        <el-table-column label=姓名 prop="staffName">
                        </el-table-column>
                        <el-table-column label=监督次数>
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.plannedInspectionTimes"
                                    @change="handleChange(scope.$index, scope.row)" :min="0" :max="10" label="描述文字">
                                </el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column align="right">
                            <template slot="header">
                            </template>
                        </el-table-column>
                    </el-table>


                    <el-tag type="success">专项检查</el-tag>
                    <el-table max-height="250"
                        :data="postData.tableCheck.filter(data => !search ||data.staffName.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">
                       
                        <el-table-column label="检查专项" prop="taskItem">
                        </el-table-column>
                        <el-table-column label=姓名 prop="staffName">
                        </el-table-column>                        
                        <el-table-column label=监督次数>
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.plannedInspectionTimes"
                                    @change="handleChange(scope.$index, scope.row)" :min="0" :max="10" label="描述文字">
                                </el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column align="right">
                            <template slot="header">

                            </template>

                        </el-table-column>
                    </el-table>
                </div>
            </el-form>
        </div>
    </div>
</template>


<script>
    import {
        getGroups,
        getRoles,
        postWork,
        getUser,
        getWork,
        // getMessages,
    } from '../../../services/task_issue'
    export default {
        mounted() {
            this.getGroupName()
            this.getUser()
        },
        methods: {
            getData(){
            for(let key in this.formData.roles){
                if( this.formData.roles[key].staffName==this.submitData.staffName){
                    this.toID=this.formData.roles[key].staffID
                }
            }
        },


            getGroupName() {
                getGroups().then((res) => {
                    this.formData.groups = res.data
                }).catch((err) => {
                    this.$message.error(err.message)
                })
            },
            getUser() {
                getUser().then((res) => {
                    this.formData.user = res.data
                }).catch((err) => {
                    this.$message.error(err.message)
                })
            },
            getRoles() {
                this.submitData.staffName = []
                this.postData.tableTeam = []
                this.postData.tableGroup = []
                this.postData.tableStaff = []
                getRoles(this.formData.groupName).then((res) => {
                    if(res.data[0] == null) {
                        this.$message.error("未获取到检查组成员！")
                        this.formData.roles = []
                    }
                    else{
                        this.formData.roles = res.data
                    }
                }).catch((err) => {
                    this.$message.error(err.message)
                })
            },



            getTeam() {
                
                this.postData.tableStaff=this.submitData
                
                getWork(this.submitData).then((res) => {
                    this.postData.tableTeam = res.team

                    this.postData.tableTeam.forEach(item => {

                        this.$set(item, 'plannedInspectionTimes', 1)
                    })
                }).catch((err) => {
                    this.$message.error(err.message)
                })
            },
            getGroup() {
                
                getWork(this.submitData).then((res) => {
                    this.postData.tableGroup = res.group

                    this.postData.tableGroup.forEach(item => {
                        this.$set(item, 'plannedInspectionTimes', 1)
                    })
                }).catch((err) => {
                    this.$message.error(err.message)
                })
            },
            getLocation() {
                
                getWork(this.submitData).then((res) => {
                    this.postData.tableLocation = res.location
                    
                    this.postData.tableLocation.forEach(item => {
                        this.$set(item, 'plannedInspectionTimes', 1)
                    })
                }).catch((err) => {
                    this.$message.error(err.message)
                })
            },
            getKey() {

                getWork(this.submitData).then((res) => {
                    this.postData.tableKey = res.key

                    this.postData.tableKey.forEach(item => {
                        this.$set(item, 'plannedInspectionTimes', 1)
                        this.$set(item, 'type', '关键环节')
                    
                    })
                }).catch((err) => {
                    this.$message.error(err.message)
                })
            },
            getCheck() {

                getWork(this.submitData).then((res) => {
                    this.postData.tableCheck = res.check
                    
                    this.postData.tableCheck.forEach(item => {
                        this.$set(item, 'plannedInspectionTimes', 1)
                        this.$set(item, 'type', '专项检查')
                    })
                }).catch((err) => {
                    this.$message.error(err.message)
                })
            },
            addTimes() {
                
                this.postData.tableCheck.forEach(item => {
                    this.$set(item, 'round', this.time)
                })
                this.postData.tableTeam.forEach(item => {
                    this.$set(item, 'round', this.time)
                })
                this.postData.tableGroup.forEach(item => {
                    this.$set(item, 'round', this.time)
                })
                this.postData.tableKey.forEach(item => {
                    this.$set(item, 'round', this.time)
                })
                 this.postData.tableStaff.round = this.time
                 this.postData.round=this.time
                
            },
            //    getTeam() {
            //         getTeam().then((res) => {
            //             this.formData.teams = res.data
            //          }).catch((err) => {
            //             this.$message.error(err.message)
            //           })
            //      },
          
            submit() {
               // this.submitData.taskItem = this.taskType.concat(this.taskWay)
              //  this.submitData.taskItem = this.submitData.taskItem.concat(this.taskPart)
              //  this.submitData.taskItem = this.submitData.taskItem.concat(this.taskSpecial)
                // console.log(this.postData)
                // console.log(this.postData.startDate)
                // console.log(JSON.stringify(this.postData.tableStaff))
                this.message.to_user_id=this.toID
              postWork(this.postData).then((res) => {
                    this.$message({
                        message: res.message,
                        type: 'success'
                    });
                    // this.$router.go(0);
                }).catch((err) => {
                    this.$message.error(err.message);
                })
                // getMessages(this.message).then((res) => {
                //     this.$message({
                //         message: res.message,
                //         type: 'success'
                //     });
                //     // this.$router.go(0);
                // }).catch((err) => {
                //     this.$message.error(err.message);
                // })
            },

            //      test() {				
            //          var jsonData = eval('[{"belongsname":"","id":901,"isleaf":0,"name":"检察人员","pid":"","type":""},{"belongsname":"","id":902,"isleaf":1,"name":"综合部(办公室)","pid":"901","type":""},{"belongsname":"","id":903,"isleaf":1,"name":"工程部(工技部/技术部)","pid":"901","type":""},{"belongsname":"","id":904,"isleaf":1,"name":"安质部","pid":"901","type":""},{"belongsname":"","id":905,"isleaf":1,"name":"计财部","pid":"901","type":""},{"belongsname":"","id":906,"isleaf":1,"name":"物设部(物机部)","pid":"901","type":""},{"belongsname":"","id":907,"isleaf":1,"name":"中心试验室","pid":"901","type":""}]');				this.jsonDataTree = transData(jsonData, 'id', 'pid', 'children');		console.log(this.jsonDataTree);  
            //
            ///           },
            //  handleNodeClick(jsonDataTree) {
            //   console.log(jsonDataTree);
            //  }
        },

        data() {
            return {
                toID:[],
                time: '',
                postWork: {},
                search: '',
                plannedInspectionTimes: '',
                showEdit: [], //显示编辑框
                showBtn: [],
                showBtnOrdinary: true,
                // input:'1',
                formData: {
                    user: '',
                    name: '',
                    groups: [],
                    groupName: '',
                    superVisionGroupCode: '',
                    roles: [],
                    type: [],
                    teams: [],
                    lands: [],
                    specials: [],
                    Works: []
                },
                submitData: {
                    staffName: [],
                },
                message:{
                    to_user_id:[],
                    text:'您有监督任务测试',
                    uRL:'CQPersonTaskReceive',
                },
                postData: {
                    startDate: '',
                    endDate: '',
                    round:'',
                    tableTeam: [],
                    tableGroup: [],
                    tableStaff:[],
                tableLocation: [],
                tableKey: [],
                tableCheck: [],
                },
                taskType: [],
                taskWay: [],
                taskPart: [],
                taskSpecial: [],
                value1: '',
                value2: '',
                pickerOptionsStart: {           disabledDate: time => {             let endDateVal = this.postData.endDate;             if (endDateVal) {                return time.getTime() > new Date(endDateVal).getTime();             }           }        },        pickerOptionsEnd: {           disabledDate: time => {             let beginDateVal = this.postData.startDate;             if (beginDateVal) {               return (time.getTime()<new Date(beginDateVal).getTime()-1*24*60*60*1000             );           }        }    },
            };

        }

    }
</script>

<style>
    .el-checkbox {
        margin-left: 25px;
    }

    .cutting {
        padding: 0 0px 0px;
        margin: 20px 0px;
        line-height: 1px;
        border-left: 750px solid rgb(221, 221, 221);
        border-right: 750px solid rgb(221, 221, 221);
        text-align: center;
        height: 2px;
        width: 100%;
    }
</style>